<script lang="ts" setup>
import { getCartList, selectoneFn, selectallFn, removeFn } from '../../api/cart'
import { onMounted, ref } from 'vue'
import type { Ref } from 'vue'
import { iCart } from './cartType'
import { useUserInfoStore } from '../../stores/userInfo'

import { showToast } from 'vant'


const user = useUserInfoStore()

const cartList: Ref<iCart[]> = ref([])

onMounted(() => {
    getCartList({
        userid: user.userid
    }).then(res => {
        // console.log(res.data.data);
        cartList.value = res.data.data

        // 验证是否全选
        isSelectAllFn()
    })
})


// -------------------- 页脚提交订单组件 ------------------------
// 是否全选
const checked = ref(true)
// 提交的点击事件
function onSubmit() {

}
// 点击修改地址的事件
function onClickLink() {

}


// ----------------- 单条数据选择的点击 ------------------
function changeCheckBox(cart: iCart) {
    // console.log(cart);
    selectoneFn({
        cartid: cart.cartid,
        flag: cart.flag
    }).then(res => {
        showToast(res.data.message)

        // 验证是否全选
        isSelectAllFn()
    })
}

// ---------- 验证是否为全选
const isAll = ref(false)
function isSelectAllFn() {
    for (let i = 0; i < cartList.value.length; i++) {
        const element = cartList.value[i];

        if (!element.flag) {
            // 没有全选
            isAll.value = false
            return
        }

    }

    // 如果所有的判断都是选中，那么这里就是代表全选了
    isAll.value = true
}
// --------------- 全选按钮-
function changeAll() {
    selectallFn({
        userid: user.userid,
        type: isAll.value
    }).then(res => {
        // 显示结果
        showToast(res.data.message)

        // 重新获取购物车数据
        getCartList({
            userid: user.userid
        }).then(res => {
            // console.log(res.data.data);
            cartList.value = res.data.data
            isSelectAllFn()
        })
    })
}


// --------------- 购物车删除
function delClick(cart: iCart) {
    removeFn({
        cartid: cart.cartid
    }).then(res => {
        // 显示结果
        showToast(res.data.message)

        // 重新获取购物车数据
        getCartList({
            userid: user.userid
        }).then(res => {
            // console.log(res.data.data);
            cartList.value = res.data.data
            isSelectAllFn()
        })
    })
}


</script>
<template>
    <div class="box">
        <header class="header">购物车</header>
        <div class="content">
            <div v-if="cartList.length">

                <van-swipe-cell v-for="cart in cartList" :key="cart.cartid">
                    <van-card :num="cart.num" :price="cart.originprice" :title="cart.proname" class="goods-card">
                        <template #thumb>
                            <div class="imgBox">
                                <van-checkbox @change="changeCheckBox(cart)" v-model="cart.flag"
                                    checked-color="#f66"></van-checkbox>
                                <van-image width="60" height="60" :src="cart.img1" />
                            </div>
                        </template>
                    </van-card>


                    <template #right>
                        <van-button @click="delClick(cart)" square text="删除" type="danger" class="delete-button" />
                    </template>
                </van-swipe-cell>

                <div class="bottom-box"></div>
            </div>
            <div v-else>
                <van-empty image="error" description="购物车为空" />
            </div>


            <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
                <van-checkbox @click="changeAll" v-model="isAll">全选</van-checkbox>
                <template #tip>
                    你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
                </template>
            </van-submit-bar>

        </div>


    </div>
</template>

<style lang="scss" scoped>
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}

.bottom-box {
    height: 90px;
}

.van-submit-bar {
    bottom: 52px;
}

.imgBox {
    display: flex;
    flex-direction: row;
    align-items: center;

}
</style>